<template>
	<view style="padding-bottom: 60rpx;">
		<view class="banner">
			<up-image :src="product.image" width="100%" mode="widthFix" bgColor="none"></up-image>
		</view>
		<view class="gift-pack">
			<view class="pack-name">
				{{ product.name }}
			</view>
			<view class="prices">
				<text class="prices-unit">￥</text>
				<text class="prices-money">{{ product.price }}</text>
			</view>
		</view>
		<up-card :show-head="false" :show-foot="false">
			<template #body>
				<view>
					礼包内容
				</view>
				<up-tabs :list="product.productAttr" @change="changeProduct"></up-tabs>

				<view class="product-lst">
					<view class="product-items" v-for="pro in showGiftProduct">
						<view class="product-name">
							{{ pro.productData.name }} x {{ pro.number }}
							<view class="detail" @tap="productDetail(pro.productData.id)">
								查看
							</view>
						</view>
						<view class="product-prices">
							￥{{ pro.price }}
						</view>
					</view>
				</view>
			</template>
		</up-card>
		<up-card :show-head="false" :show-foot="false">
			<template #body>
				<view>礼包说明</view>
				<view class="recharge-content">
					<rich-text :nodes="product.content"></rich-text>
				</view>
			</template>
		</up-card>

	</view>
	<view class="footer">
		<view>
			<view class="prices" v-if="productStaus">
				<text class="prices-unit">￥</text>
				<text class="prices-money">{{ product.price }}</text>
			</view>
		</view>
		<view class="recharg-btn">
			<up-button type="primary" :text="!btnType?'立即领取':'立即购买'" shape="circle" @tap="showInfo=true"
				v-if="productStaus"></up-button>
			<up-button type="primary" text="我的兑换" shape="circle" @tap="rechargeTabs" v-else></up-button>
		</view>

	</view>
	<up-popup :show="showInfo" @close="close" @open="open" :round="22" mode="bottom">
		<view class="product-title">
			<up-image :src="product.image" width="85px" height="85px" mode="widthFix"></up-image>
			<view style="margin-left: 15px;">
				<view class="product-name">
					{{ product.name }}
				</view>
				<view class="product-pricec">
					￥{{ product.price }}
				</view>
			</view>
		</view>
		<view class="changGift">
			<view class="gift-its" v-for="its in product.productAttr" @tap="checkedAttr=its.id"
				:class="checkedAttr === its.id?'active':''">
				{{ its.name }}
			</view>
		</view>
		<view class="product-btn">
			<up-button type="primary" :text="!btnType?'立即领取':'立即购买'" shape="circle" @tap="payment"></up-button>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getQuery
	} from '@/utils/common';
	import {
		codeProduct, idProduct
	} from '@/utils/api/api';
	const product = ref({})
	const changeProductInx = ref(0)
	const btnType = ref(true)
	const showGiftProduct = computed(() => {
		if (Object.keys(product.value).length < 1 || product.value.productAttr.length < 1) {
			return []
		} else {
			return product.value.productAttr[changeProductInx.value].product
		}
	})
	const checkedAttr = ref()
	const productStaus = ref(true)
	const changeProduct = its => {
		// console.log(its)
		changeProductInx.value = its.index

	}
	const showInfo = ref(false)
	// 定义方法  
	function open() {
		// 打开逻辑，比如设置 show 为 true  
		showInfo.value = true;
		// console.log('open');  
	}

	function close() {
		// 关闭逻辑，设置 show 为 false  
		showInfo.value = false;
		// console.log('close');  
	}
	const inputValues = {
		code: "",
		mobile: ""
	}
	onShow(() => {
		let query = getQuery()
		// console.log(query)
		if (query.options.code) {
			btnType.value = false
			uni.removeStorageSync("pro_id")
			codeProduct(query.options.code).then((res) => {
				uni.setStorageSync('code', query.options.code)
				product.value = res.result.gift
				// console.log(product)
				productStaus.value = res.result.draw_status === 1
				// console.log(productStaus.value)
			}).catch(()=>{
				uni.redirectTo({
					url: '/pages/userCenter/userCenter'
				})
			})
		} else if (query.options.id) {
			uni.removeStorageSync("code")
			uni.setStorageSync("pro_id", query.options.id)
			idProduct(query.options.id).then(res=>{
				product.value = res.result
			})
		}
	})
	const payment = () => {
		if (!checkedAttr.value) return uni.showToast({
			title: '请选择一个礼包产品',
			icon: 'none'
		})
		// console.log(checkedAttr)
		uni.navigateTo({
			url: "/pages/payment/payment?id=" + checkedAttr.value
		})
	}
	const productDetail = id => {
		uni.navigateTo({
			url: '/pages/product/product?id=' + id
		})
	}
	const rechargeTabs = ()=>{
		uni.navigateTo({
			url: '/pages/userCenter/userCenter'
		})
	}
</script>

<style lang="scss">
	.banner {
		// width: 100vw;
		box-sizing: border-box;
		padding: 30rpx;

		// padding: 15px;
		.u-image__image {
			// width: 100% !important;
		}
	}

	.gift-pack {
		margin: 0 30rpx;
		line-height: 1.75;

		.pack-name {
			font-weight: 600;
			font-size: 1.15rem;
		}
	}

	.product-lst {
		margin-top: 30rpx;

		.product-items {
			display: flex;
			// align-items: center;
			justify-content: space-between;
			font-weight: 600;
			line-height: 1.75;
			margin: 20rpx 0;

			.product-prices {
				color: #ceccce;
			}

			.detail {
				font-size: .7rem;
				color: #007aff;
			}
		}
	}

	.recharge-content {
		line-height: 1.75;
		text-align: justify;
		font-size: .8rem;
	}

	.footer {
		position: fixed;
		box-sizing: border-box;
		padding: 30rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.recharg-btn {
			flex-basis: 120px;
		}
	}

	.show-accounts {
		box-sizing: border-box;
		padding: 30rpx 30rpx 60rpx;

		.show-account-its {
			margin-bottom: 30rpx;

			.show-accounts-title {
				margin-bottom: 30rpx;
				color: #ceccce;
			}
		}

	}

	.product-title {
		display: flex;
		// justify-content: space-between;
		// align-items: center;
		box-sizing: border-box;
		padding: 15px;
		line-height: 1.75;
	}

	.changGift {
		display: flex;
		padding: 0 15px 15px;
		box-sizing: border-box;

		.gift-its {
			margin-right: 5px;
			box-sizing: border-box;
			padding: 5px;
			color: #ceccce;
			border-radius: 3px;
			border: 1px solid;

			&.active {
				color: #007aff;
			}
		}
	}

	.product-btn {
		padding: 0 15px;
		margin-bottom: 25px;
	}
</style>